<template>
  <div>
    <!-- 搭建基本布局 -->
    <el-container>
      <el-header>
        <p class="diap">
          <span>小u后台管理系统</span>
          <!-- 不使用辅助型函数，直接仓库 取值 -->
          <span>用户名：{{ $store.getters.getuserInfo.username }}</span>
        </p>
        <el-button type="danger"  @click="dialogVisible = true"
          >退出登录</el-button
        >
      </el-header>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
  
      >
        <span>确定要退出登录吗?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="logout"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-container>
        <el-aside width="236px">
          <v-nav></v-nav>
        </el-aside>
        <el-main>
          <!-- 二级路由出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vNav from "../components/vNav.vue";
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  components: {
    vNav,
  },
  methods: {
   
    logout(){
      this.$store.dispatch('changeUserAction',false)
              //跳转到登录
        this.$router.replace('/login')
    }
  },
};
</script>

<style scoped>
.el-header {
  background-color: rgb(58, 69, 78);
  font-size: 25px;
  /* line-height: 50px; */
  display: flex;
  justify-content: space-between;
}
.diap {
  display: flex;
  flex-direction: column;
}
</style>
